<template>
  <!-- 软件终端 -->
  <div id="Software">
    <p class="search">
      <span>终端类别：</span>
      <el-select v-model="form.terminal" placeholder="请选择" class="searchItem" @change="selectChange">
        <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.code" />
      </el-select>
      <el-button class="search-button" type="primary" @click="toDetails()">终端注册</el-button>
      <!-- <el-button class="search-button" type="primary" @click="toDetails('1', 'Edit')">终端配置修改</el-button> -->
      <!-- <el-button class="search-button" type="primary" @click="deleteClick()">删除终端</el-button> -->
    </p>
    <el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="#fff" :data="list" style="width: 100%;min-height: calc(100vh - 3.7rem);">
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="name" :label="`${terminalZH}名称`" align="center" />
      <el-table-column prop="manager" label="负责人" align="center" />
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="终端配置修改" placement="top">
            <svg-icon class="svgIcon" icon-class="edit" @click.stop="toDetails(scope.row)" />
          </el-tooltip>
          <el-tooltip effect="dark" content="删除终端" placement="top">
            <svg-icon class="svgIcon" icon-class="delete" @click.stop="deleteClick(scope.row)" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        popper-class="DataAcquisition_fenye"
        :current-page="form.pageNum"
        background
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <add-wx v-if="form.terminal=='wxList'" ref="wxList" />
    <add-ydpt v-else-if="form.terminal=='ydList'" ref="ydList" />
    <add-other v-else-if="form.terminal=='otherList'" ref="otherList" />
  </div>
</template>

<script>
import addWx from './components/addWX'
import addYdpt from './components/addYdpt'
import addOther from './components/addOther'
import { bus } from '@/main'

export default {
  name: 'Software',
  components: { addWx, addYdpt, addOther },
  data() {
    return {
      options: [],
      form: {
        terminal: '',
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      terminalZH: '',
      list: [],
      loading: false
    }
  },
  created() {
    bus.$on('refreshSoftware', (msg) => {
      this.form.pageNum = 1
      this.getData(msg)
    })
    this.init()
  },
  methods: {
    init() {
      // 请求终端类型
      this.$api.getTerminal().then((response) => {
        if (response.data.status == 1) {
          this.options = JSON.parse(JSON.stringify(response.data.data))
          for (const i in this.options) {
            if (this.options[i].name == '硬件终端') {
              this.options.splice(i, i)
            }
          }
          this.form.terminal = this.options[0].code
          this.terminalZH = this.options[0].name
          this.getData(this.options[0].code)
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 请求列表数据
    getData(val) {
      this.loading = true
      this.$api[`get${val}`](this.form).then((response) => {
        this.list = []
        if (response.data.status == 1) {
          setTimeout(() => {
            this.loading = false
            this.list = response.data.data.list
            this.total = response.data.data.list.length
          }, 0.5 * 1000);
        } else {
          this.$message.error(response.data.msg)
          setTimeout(() => {
            this.loading = false
          }, 1 * 1000)
        }
      }).catch(error => this.loading = false)
    },
    // 新增 / 编辑
    toDetails(data) {
      const obj = {
        type: this.form.terminal,
        name: this.terminalZH,
        title: '终端注册',
        open: true,
        data: {}
      }
      if (data) {
        obj.data = data
        obj.title = '终端配置修改'
      }
      this.$refs[this.form.terminal].getData(obj)
    },
    // 删除终端
    deleteClick(data) {
      this.$confirm('是否删除当前终端?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api[`delete${this.form.terminal}`]({ id: data.id }).then((response) => {
          if (response.data.status == 1) {
            this.$message.success(response.data.msg)
            this.getData(this.form.terminal)
          } else {
            this.$message.error(response.data.msg)
          }
        })
      }).catch(() => {
        console.log('取消删除')
      })
    },
    // 切换终端类型时，更改table表头
    selectChange(val) {
      for (const i in this.options) {
        if (this.options[i].code == val) {
          this.terminalZH = this.options[i].name
          this.list = []
          this.loading = true
          this.getData(val)
          return
        }
      }
    },
    // 改变每页数据条目数
    handleSizeChange(val) {
      this.form.pageSize = val,
      this.searchClick()
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.searchClick()
    }
  }
}
</script>
<style lang="scss" scoped>
#Software{
  width: 100%;
  background: #fff;
  padding: 0.2rem;
  border-radius: 0.05rem;
  box-shadow: #ccc 0 0 10px 0px;
  >>>*{font-size: 0.16rem}
  .search {
    .search-button {
      width: 1.5rem;
    }
  }
  >>>.svgIcon{
    font-size: 0.25rem  !important;
    margin: 0 0.1rem;
    color: #666;
    cursor: pointer;
  }
  .pagination {
    width: 100%;
    background: #fff;
    text-align: right;
    padding: 0.15rem;
    padding-bottom: 0;
    >>>.el-pagination {
      * { font-size: 0.16rem }
    }
  }
}

</style>
